<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>系统设置</title>
    <link rel="stylesheet" href="${contextPath}/css/ElementCss/theme/index.css">
    <link rel="stylesheet" href="${contextPath}/css/home.css"/>
</head>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>
    .dialogContent {
        width: 100%;
        height: 50%;
    }
    .dialogChild{
        width: calc(50% - 2px);
        height: calc(100% - 32px);
        float: left;
        overflow-y: auto;
    }
    .dialogTitle{
        width: 50%;
        height: 32px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        float: left;
    }
    [v-cloak] {
        display: none;
    }
    .inline-div {
        display: inline-block; /* 或者使用 inline */
        margin-right: 10px; /* 可选，添加一些右边距以分隔两个div */
        vertical-align: top; /* 可选，用于对齐方式 */
    }
    .card{
        width: 40%;
        height: 100%;
        border-radius: 4px;
       /* margin: 10px;*/
        background-color: #f5f5f5;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s;
    }
</style>
<body>
<%--列表：run_model_info表数据--%>
<div id="main" class="all" v-cloak>
    <div class="allLeft">
        <!-- 左侧菜单栏 -->
        <div class="menuLeft" v-for="(menu,index) in menuLefts" @click="leftSwitch(index)"
             v-bind:class="{menuLeftS: leftNum== index}">
            <img v-bind:src="menu.url"/><br/>  {{$t(menu.title)}}    <br/>
            <hr/>
        </div>
    </div>
    <div class='allRight rightBaseDiv'>

<!--数据模型-->

        <div v-show="showsjmx" class="rightBottemDiv">
            <div  class="rightTableMont">
                <div class="container" style="width: 100%;height: 100%">
                    <div class="inline-div" style="background-color: #ffffff;width: 12%;height: 97%;border-radius: 9px">
                        <h4>手动训练</h4>

                            <label for="fileUpload">选择训练数据:</label>
                            <input type="file" id="fileUpload" name="file" class="el-button" style="width: -webkit-fill-available"><br>
                            <button  class="el-button el-button--primary" @click="mxxl">训练模型</button>

                        <h4>自动训练</h4>
                        <label for="fileUpload">选择训练时间段:</label><br>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select><br>
                        <button type="submit" class="el-button el-button--primary">开始自动训练</button>
                        <h4>选择预测模型</h4>
                        <label for="fileUpload">选择预测模型类型:</label><br>
                        <el-select v-model="valuetype" placeholder="请选择">
                            <el-option
                                    v-for="item in optionstype"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select><br>
                        <label for="fileUpload">选择预测天数:</label><br>
                        <el-select v-model="valueday" placeholder="请选择">
                            <el-option
                                    v-for="item in optionsday"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select><br>
                        <button type="submit" class="el-button el-button--primary">开始自动预测</button><br>
                        <label for="fileUpload">自定义时间预测:</label><br>
                        <input type="date" id="time" name="time" placeholder="请输入时间" class="el-input__inner"><br>
                        <label for="fileUpload">选择预测天数:</label><br>
                        <input type="number"  placeholder="请输入天数" class="el-input__inner"><br>
                        <button type="submit" class="el-button el-button--primary">开始自定义预测</button>
                    </div>
                    <div class="inline-div" style="background-color: #ffffff;width: 86%;height: 97%">
                        <div class="inline-div card" style="background-color: #ffffff;width: 27%;height: 100%;border-radius: 9px">
                            <el-table
                                    :data="xlsj"
                                    style="width: 100%;"
                                    max-height="750">
                                <el-table-column
                                        prop="taskTime"
                                        label="日期"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="taskName"
                                        label="模型姓名"
                                        width="120">
                                </el-table-column>
                                <el-table-column label="状态">
                                    <template slot-scope="scope">
                                       <el-tag v-if="scope.row.type == 0" style="background-color: #fbf9e7;border-color: #f7dfce;color: #d76b0c;">运行中</el-tag>
                                        <el-tag v-else="scope.row.type == 1">成功</el-tag>
                                    </template>
                                </el-table-column>

                                <el-table-column
                                        fixed="right"
                                        label="操作"
                                        width="70">
                                    <template slot-scope="scope">
                                        <el-button v-if="scope.row.type == 0"
                                                @click.native.prevent="deleteRow(scope.$index, xlsj)"
                                                type="text"
                                                size="small"
                                                :disabled='true'>
                                            查看
                                        </el-button>
                                        <el-button v-if="scope.row.type == 1"
                                                   @click.native.prevent="deleteRow(scope.$index, xlsj)"
                                                   type="text"
                                                   size="small">
                                            查看
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </div>
                        <div class="inline-div card" style="background-color: #ffffff;width: 71%;height: 100%;border-radius: 9px">
                            <div style="width: 100%;height: 48%">
                                <div class="inline-div card" style="background-color: #ffffff;width: 40%;height: 100%;border-radius: 9px">
                                    <el-table
                                            :data="ylsnd"
                                            style="width: 100%"
                                            height="350">
                                        <el-table-column
                                                fixed
                                                prop="modelName"
                                                label="模型名称"
                                                width="100">
                                        </el-table-column>
                                        <el-table-column
                                                prop="dataTime"
                                                label="时间"
                                                width="200"
                                                :formatter="formatDate">
                                        </el-table-column>
                                        <el-table-column
                                                prop="dataValue"
                                                label="叶绿素浓度(μg/L)"
                                                width="200">
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <div  class="inline-div card" style="background-color: #ffffff;width: 57%;height: 100%;border-radius: 9px">
                                    <div id="mapid" style="width: 100%; height: 100%;"></div>
                                </div>

                            </div>
                            <div style="width: 100%;height: 48%;margin-top: 29px;" class="card">
                               <div id="tongji" style="width: 100%;height: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div v-show="showcmx" class="rightBottemDiv">
        <div class="rightTableMont">
            <div class="container" style="width: 100%;height: 100%">
                <div class="inline-div" style="background-color: #ffffff;width: 12%;height: 97%;border-radius: 9px">
                    <h4>EFDC 模型计算</h4>
                    在此页面中，您可以执行 EFDC 水动力模型的计算任务。<br>
                    <label for="fileUpload">模型计算起始时间:</label><br>
                    <input type="date" name="time" placeholder="请输入时间" class="el-input__inner"><br>
                    <label for="fileUpload">模拟天数:</label><br>
                    <input type="number"  placeholder="请输入天数" class="el-input__inner"><br>
                    <button class="el-button el-button--primary">运行 EFDC 模型</button>
                </div>
                <div class="inline-div" style="background-color: #ffffff;width: 86%;height: 97%">
                    <div class="inline-div card" style="background-color: #ffffff;width: 21%;height: 100%;border-radius: 9px">
                        <el-table
                                :data="cmx"
                                style="width: 100%;"
                                max-height="750">
                            <el-table-column
                                    prop="taskTime"
                                    label="日期"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="taskName"
                                    label="模型姓名"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    prop="type"
                                    label="状态"
                                    width="70">
                                <span v-if="cmx.type === '0'">未完成</span>
                                <span v-else="cmx.type === '1'">已完成</span>
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="70">
                                <template slot-scope="scope">
                                    <el-button
                                            @click.native.prevent="deleteRow(scope.$index, tableData)"
                                            type="text"
                                            size="small">
                                        查看
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div  class="inline-div card" style="background-color: #ffffff;width: 77%;height: 100%;border-radius: 9px">
                        <div id="mapidcmx" style="width: 100%; height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>
</body>
<script src="${contextPath}/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/js/elementIndex.js"></script>
<script src="${contextPath}/js/vueApp.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/js/vue-resource.js"></script>

<script src="${contextPath}/js/language/languages.js"  type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<%--公共方法--%>
<script src="${contextPath}/js/homeJS/publicTool.js"></script>
<%--组件 得在实例化前面--%>
<script src="${contextPath}/js/homeJS/component.js"></script>

<%--语言js--%>
<script src="${contextPath}/js/language/vue-i18n.js"></script>

<script src="${contextPath}/js/homeJS/homeMonitoring.js"></script>
<%--<script src="${contextPath}/library/layui/layui.all.js"></script>--%>

</html>
